<template>
  <div class="appointment"  style="height: 100%">
    <div class="pageTitleSubTitle">
      <div class="title">会员管理</div>
      <div class="btn">
        <a-button type="primary" @click="openModal">导入</a-button>
        <a-button type="primary" @click="openModal">导出</a-button>
        <a-button v-if="configJurisdiction.add" type="primary" @click="openModal"><a-icon type="plus" />添加会员</a-button>
      </div>
    </div>
    <Search :search="search" @searchVal="searchVal"/>
    <div class="storeContent">
      <a-table :columns="columns" :data-source="columnsData" :pagination="false" :rowKey="(record,index) => index">
        <span slot="order_last" slot-scope="order_last">{{order_last && order_last.payment_at?order_last.payment_at:'/'}}</span>
        <span slot="store" slot-scope="store">{{store && store.name?store.name:'/'}}</span>
        <span slot="area_no" slot-scope="area_no,record" class="operation">
          <span v-if="configJurisdiction.look" @click="$router.push({path:'/admin-customer-detail',query:{id:record.customer_no}})">查看</span>
          <span v-if="configJurisdiction.update" @click="editColumns(record)">编辑</span>
          <span v-if="configJurisdiction.del" @click="removeStore(record)">删除</span>
        </span>
      </a-table>
      <Pagination :current="page" :total="total" @pageSize="pageSize" />
    </div>
    <a-modal
      v-model="visible"
      :title="title"
      cancelText="关闭"
      okText="保存"
      width="1000px">
      <AppendMember v-if="visible" @sendData="getAppendData" ref="child" :appendData="configAppend" />
      <template slot="footer">
        <a-button class="modalCloseBtn" @click="modalChange(1)">关闭</a-button>
        <a-button class="modalConfigBtn" type="primary" :loading="loading" @click="modalChange(2)">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  import { column, appendData } from './index'
  import Pagination from '@/common/pagination/index'
  import Search from '@/common/search/index'
  import AppendMember from './appendMember'
  export default {
    name:'appointment',
    components:{
      Pagination,
      Search,
      AppendMember
    },
    data(){
      return {
        loading:false,
        visible:false,
        title:'添加门店',
        configAppend:{},
        columns: column,
        columnsData:[],
        page:1,
        total:0,
        searchText:{},
        search:[
          {
            type:'input',
            name:'会员名称',
            place:'请输入名称',
            val:'',
            key:'name',
          },
          {
            type:'input',
            name:'手机号码',
            place:'请输入手机号码',
            val:'',
            key:'phone',
          },
          {
            type:'date',
            name:'上次交易时间',
            place:'请选择时间',
            val:[],
            key:['start_time','end_time']
          }
        ],
        jurisdiction:[
          { key:'admin-customer-detail', back:'look'},
          { key:'admin-customer-add', back:'add'},
          { key:'admin-customer-update', back:'update'},
          { key:'admin-customer-del', back:'del'},
        ],
        configJurisdiction:{}
      }
    },
    created() {
      this.getList();
      this.configJurisdiction = this.getJurisdiction(1,this.jurisdiction)
    },
    methods:{
      pageSize(e){},
      searchVal(e){
        this.searchText = e;
        this.page = 1;
        this.getList()
      },
      openModal(){
        appendData.forEach(item=>{
          if(typeof item.val === 'object'){
            item.val = []
          }else{
            item.val = ''
          }
          if(item.street){
            item.street = ''
          }
        });
        this.configAppend = appendData;
        this.title = '添加会员';
        this.visible = true;
        this.getAppendDataList()
      },
      modalChange(type){
        if(type === 1) return this.visible = false;
        this.$refs.child.sendData()
      },
      getAppendData(e){
        this.loading = true;
        setTimeout(()=>{this.loading = false},1000);
        e.address_details = '';
        if(this.title === '添加会员') return this.Api.addCustomers(e).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.visible = false;
          this.getList()
        });
        this.Api.editCustomers(e,this.edit_id).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.visible = false;
          this.getList()
        })
      },
      editColumns(item){
        this.getAppendDataList();
        this.edit_id = item.customer_no;
        this.title = '编辑会员';
        this.Api.customerDetail({},item.customer_no).then(res=>{
          if(res.code != 200) return;
          res.data.sex = String(res.data.sex);
          item = res.data;
          appendData.forEach(demo=>{
            if(demo.key !== 'address'){
              demo.val = item[demo.key]
            }else{
              let arr = [];
              arr.push(item.province.id);
              arr.push(item.city.id);
              arr.push(item.county.id);
              if(item.street){
                demo.street = item.street.id
              }
              demo.val = arr;
            }
          });
          this.configAppend = appendData;
        });
      },
      removeStore(e){
        this.$confirm({
          title: '确定删除当前会员?',
          cancelText: '取消',
          okText:'删除',
          onOk:()=> {
            this.Api.removeCustomers({},e.customer_no).then(res=>{
              if(res.code !== 200) return this.$message.info(res.msg);
              this.$message.info(res.msg);
              this.getList()
            })
          }
        })
      },
      getList(){
        let data = this.searchText;
        data.size = 10;
        data.page = this.page;
        this.Api.customers(data).then(res=>{
          if(res.code !== 200) return;
          this.total = res.data.total;
          this.columnsData = res.data.items
        })
      },
      getAppendDataList(){
        this.Api.permission().then(res=>{
          if(res.code !== 200) return;
          appendData.forEach(item=>{
            if(item.key === 'store_no') item.selectData = res.data
          })
        });
        this.Api.channelAll().then(res=>{
          if(res.code !== 200) return;
          appendData.forEach(item=>{
            if(item.key === 'channel_source_id') item.selectData = res.data
          })
        });
        this.Api.staffs({job_type:4}).then(res=>{
          if(res.code !== 200) return;
          appendData.forEach(item=>{
            if(item.key === 'wechat_staff_no') item.selectData = res.data
          })
        });
        this.Api.staffs().then(res=>{
          if(res.code !== 200) return;
          appendData.forEach(item=>{
            if(item.key === 'steward_staff_no') item.selectData = res.data;
            if(item.key === 'open_card_staff_no') item.selectData = res.data
          })
        });
        this.Api.cities().then(res=>{
          if(res.code !== 200) return;
          res.data.forEach(item=>{
            item.value = item.id;
            item.label = item.city_name;
            item.children = item.city;
            item.children.forEach(demo=>{
              demo.value = demo.id;
              demo.label = demo.city_name;
              demo.children = demo.county;
              demo.children.forEach(list=>{
                list.value = list.id;
                list.label = list.city_name;
              })
            })
          });
          appendData.forEach(item=>{
            if(item.key === 'address') item.selectData = res.data
          });
          this.configAppend = appendData;
          this.visible = true
        });

      }
    }
  }
</script>
